import styled from '@/styled-px2vw'

const imgBgMinxin = `
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
`

const hCenter = `
  display: flex;
  align-items:center;
`

export const Content = styled.div`
  background-color: transparent;
  display: grid;
  grid-template-columns:repeat(auto-fill, 176px);
  grid-gap: 7px 7px;
  padding: 0px 8px 8px;
   position: relative;
  z-index:10;
  margin-top:-35px;
`
export const ContainerTopRadius = styled.div`
  width: 100%;
  height: 193px;
  position: relative;
  background-image:url(${require('./imgs/containerTopRadius.png')});
  flex-direction: column;
  ${imgBgMinxin}
  ${hCenter}
`
export const ContainerTopRadius2 = styled.div`
  width: 100%;
  height: 193px;
  position: relative;
  background-image:url(${require('./imgs/containerTopRadius.png')});
  flex-direction: column;
  bottom:0;
  ${imgBgMinxin}
  ${hCenter}
`
export const Container = styled.div`
  margin-top: -90px;
`
export const TitleImg3 = styled.div`
  position: absolute;
	width: 100%;
	height: 391px;
  top: 187px;
  background-image:url(${require('./imgs/titleImg3.png')});
  ${imgBgMinxin}
`
export const TitleImg2 = styled.div`
  position: absolute;
	width: 33px;
	height: 55px;
  left: 0;
  top: 224px;
  background-image:url(${require('./imgs/titleImg2.png')});
  ${imgBgMinxin}
`
export const TitleImg1 = styled.div`
  position: absolute;
  width: 66px;
  height: 70px;
  right: 0;
  top: 28px;
  background-image:url(${require('./imgs/titleImg1.png')});
  ${imgBgMinxin}
`
export const TitleImg = styled.div`
  width: 265px;
  height: 128px;
  background-image:url(${require('./imgs/titleImg.png')});
  margin-top: 74px;
  ${imgBgMinxin}
`
export const TopContainer = styled.div`
  width: 100%;
  height: 594px; 
  background-color:rgb(154,90,239);
  justify-content: center;
  display: flex;
`